import { FC } from "react";
import { DeviceInfo } from "../../types";
import { getDeviceStatusText } from "../../utils";
import SectionHeader from "../SectionHeader";
import styles from "./index.module.less";

interface DeviceStatusProps {
  devices: DeviceInfo[];
  isLoading?: boolean;
}

const DeviceStatus: FC<DeviceStatusProps> = ({ devices, isLoading = false }) => {
  // 获取装置状态对应的类名
  const getDeviceStatusClass = (status: string) => {
    switch (status) {
      case 'idle': return styles['status-idle'];
      case 'running': return styles['status-running'];
      case 'warning': return styles['status-warning'];
      case 'completed': return styles['status-completed'];
      case 'cleaning': return styles['status-cleaning'];
      case 'stop': return styles['status-stop'];
      default: return '';
    }
  };

  return (
    <div className={`${styles["device-status-section"]} ${isLoading ? styles["loading"] : ''}`}>
      <SectionHeader title="裂解炉工作状态" />
      <div className={styles["device-list"]}>
        {devices.map((device, index) => (
          <div key={device.id} className={styles["device-item"]}>
            <div className={styles["device-number"]}>{device.name || `${index + 1}#裂解炉`}</div>
            <div className={`${styles["device-circle"]} ${getDeviceStatusClass(device.status)} ${isLoading ? styles["loading-item"] : ''}`}>
              {getDeviceStatusText(device.status)}
            </div>
            <div className={styles["device-info"]}>
              {device.runningDays !== undefined && (
                <div className={styles["device-days"]}>
                  运行时间: {isLoading ? '加载中...' : (device.runningDays ? `${device.runningDays}日` : '—')}
                </div>
              )}
              {device.operationRate !== undefined && (
                <div className={styles["device-rate"]}>
                  运行负荷: {isLoading ? '加载中...' : (device.operationRate ? `${device.operationRate}%` : '—')}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default DeviceStatus; 